<!--
 * @Author: zhaoxiaoyang zhaoxiaoyang@byteluck.com
 * @Date: 2023-11-30 17:31:52
 * @LastEditors: zhaoxiaoyang zhaoxiaoyang@byteluck.com
 * @LastEditTime: 2024-01-04 10:26:36
 * @FilePath: /pro-portal-front/src/entry_mobile/components/CardFrame/components/Card.vue
-->
<template>
	<div
		class="card"
		@click="openApp(cardDetail.link || cardDetail.form_url, cardDetail.fb_key)"
	>
		<img :src="cardDetail.icon" />
		<p v-html="getHTML(cardDetail.name)"></p>
	</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { apiInit } from '@/services'
import { showFailToast } from 'vant'
const api = apiInit()
const route: any = useRoute()
const props = defineProps({
	cardDetail: {
		type: Object,
		default: {},
	},
	searchKeyWord: {
		type: String,
		default: '',
	},
})
const emits = defineEmits(['init'])
const openApp = async (url: string, resource_id: string) => {
	let { code } = await api.default.SaveRecentPrivateV2POST({
		payload: {
			resource_id,
		},
	})
	if (code === '000000') {
	} else {
		showFailToast('接口出错了')
	}
	window.location.href = url
}
const getHTML = computed(() => {
	return (text: string) => {
		if (props.searchKeyWord.trim()) {
			const words = text.split('')
			const keys = props.searchKeyWord.trim().replace(/\s*/g, '').split('')
			keys.forEach(key => {
				for (let i = 0; i < words?.length; i++) {
					if (words[i] === key) {
						words[i] = `<span style="color: var(--bl-brand-c);">${key}</span>`
					}
				}
				text = words.join('')
			})
		}
		return text
	}
})
</script>

<style lang="less" scoped>
.card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80px;
	padding: 7px;
	border-radius: 8px;
	transition: all 0.3s ease-in;
	&:active {
		background-color: #bbbfc4;
	}
	img {
		width: 50px;
		height: 50px;
		margin-bottom: 8px;
	}
	p {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 16px;
		text-align: center;
		color: #1f2329;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical; //盒子中内容竖直排列
		word-break: break-all;
		span {
			color: @rok-mobile-primary-color;
		}
	}
}
</style>
